 /*
 * @description: 客服系统/排期
 * @Author: along
 * @Date: 2020-09-28
 * @Last Modified by: along
 * @Last Modified time: 2020-10-10
 */
<template>
    <div class="schedule">
        <div class="schedule-rule">
            排期规则：当前可设置排期的日期为{{ ruleDate.start }} ～ {{ ruleDate.end }}（即当天至以后的一年时间内）
        </div>
        <div class="wrap">
            <p
                class="cancel"
                @click="cancelDate()"
            >撤销分配</p>
            <p class="line"/>
            <FullCalendar
                ref="fullcalendar"
                default-view="timeGridWeek"
                locale="zh-cn"
                time-zone="UTC"
                first-day="1"
                week-number-calculation="ISO"
                editable="true"
                droppable="true"
                display-event-end="true"
                selectable="true"
                select-helper="true"
                unselect-auto="true"
                :height="'parent'"
                :event-time-format="evnetTime"
                :header="header"
                :plugins="calendarPlugins"
                :events="calendarEvents"
                @select="select"
                @unselect="unselect"
                @eventDrop="calendarEventDrop"
                @eventClick="eventClick"
                @eventResize="eventResize"
            />

        </div>
        <div class="date-footer">
            <el-button
                @click="()=>{
                    this.$router.push({
                        name: 'customManagement',
                        query: {
                            TYPE: '2'
                        }
                    })
                }"
                size="medium"
                type="primary"
                :style="{width: '120px'}"
            >返回</el-button>
        </div>

        <!-- 创建排期 -->
        <el-dialog
            title="创建排期"
            :visible.sync="dialogVisibleCreate"
            :close-on-click-modal="false"
            width="504px"
            class="dialogVisibleCreate"
        >
            <el-checkbox
                v-model="formData.allDay"
                v-if="formData.flag"
                @change="setFormData(formData.allDay)"
            >全天</el-checkbox>
            <div class="wrap">
                <i class="iconfont el-icon-hand-nianfen"/>
                <p class="wrap-dete">日期： {{ formData.select_date }}</p>
            </div>
            <div class="temp">
                开始时间
                <el-time-select
                    placeholder="开始时间"
                    v-model="formData.startTime"
                    size="small"
                    :style="{width: '303px', marginLeft: '12px'}"
                    :picker-options="{
                        start: '00:00',
                        step: '00:05',
                        end: '24:00'
                }"/>
            </div>
            <div class="temp">
                结束时间
                <el-time-select
                    placeholder="结束时间"
                    v-model="formData.endTime"
                    size="small"
                    :style="{width: '303px', marginLeft: '12px'}"
                    :picker-options="{
                        start: '00:00',
                        step: '00:05',
                        end: '24:00'
                }"/>
            </div>
            <!-- 新建时支持 -->
            <div
                class="radio"
                @click="formData.dialog = true"
                v-if="eventType == '' || eventType == 'add'"
            >
                <i class="iconfont el-icon-hand-shijian"/>
                {{ formData.type | filterType }}
            </div>
            <div
                class="dilog"
                v-if="formData.dialog"
            >
                <el-radio-group
                    v-model="formData.type"
                    @change="changeType(formData.type)"
                >
                    <el-radio :label="0">不重复</el-radio>
                    <el-radio
                        :label="1"
                        v-if="formData.flag"
                    >每天重复</el-radio>
                    <el-radio :label="2">每周重复</el-radio>
                    <el-radio :label="3">每月重复</el-radio>
                    <el-radio :label="4">工作日重复</el-radio>
                </el-radio-group>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisibleCreate = false"
                    size="medium"
                    :style="{width: '120px', marginRight: '36px'}"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="medium"
                    @click="createDate()"
                    :style="{width: '120px'}"
                >创建排期</el-button>
            </span>
        </el-dialog>

        <!-- 撤销分配 -->
        <el-dialog
            title="撤销分配"
            :visible.sync="dialogVisibleCancel"
            :close-on-click-modal="false"
            width="640px"
            class="dialogVisibleCreate"
        >
            <div class="dialodWrap">
                <el-select
                    v-model="formData.month"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    @change="getMonthList(1)"
                >
                    <el-option
                        v-for="(item,index) in monthList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <el-button
                    size="small"
                    type="default"
                    @click="cancelAllDate()"
                >
                    撤销当月所有排期
                </el-button>
            </div>
            <el-table
                :data="scheduleList"
                style="width: 100%;max-height:550px"
                height="100%"
                border
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    prop="start_time"
                    label="排期时间"
                    show-overflow-tooltip
                    align="center"
                    :width="300"
                >
                    <template slot-scope="scope">
                        {{ scope.row.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }} ~ {{ scope.row.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    show-overflow-tooltip
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="chengeScedule(scope.row)"
                        >
                            {{ !scope.row.flag ? '撤销' : '取消撤销' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisibleCancel = false"
                    size="medium"
                    :style="{width: '120px', marginRight: '36px'}"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="medium"
                    @click="confirmDate()"
                    :style="{width: '120px'}"
                >确定撤销</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';

//基础日程配置参数
const config = {
    editable: true,
    backgroundColor: 'rgba(244,178,83,.7)',
    textColor: '#FFFFFF',
    borderColor: '#FFAF39'
};

// 创建日程相关
const LIST = {
    allDay: false,
    select_date: '',
    startTime: '',
    endTime: '',
    dialog: false,
    type: '',//重复状态
    flag: true,// true:只有当天日程 false: 存在其它天日程
    month: new Date().getMonth() + 1
};

export default {
    name: 'CustomDate',
    components: {
        FullCalendar
    },
    data () {
        return {
            eventType: '',
            dateID: '',
            //弹窗相关
            dialogVisibleCreate: false,
            dialogVisibleCancel: false,
            //相关参数
            formData: {
                ...LIST
            },
            //日程相关
            calendarEvents: [],
            calendarPlugins: [
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin
            ],
            header: {
                left: '',
                center: 'prev,title,next',
                right: ''
            },
            evnetTime: {
                hour: 'numeric',
                minute: '2-digit',
                hour12: false
            },
            calendarEventDrop: info => {
                this.dropEvent(info);
            },
            kf_no: '',//唯一客服编号
            shop_no: '',//店铺编号
            scheduleList: [],//撤销排期列表
            scheduleListCopy: [],//撤销排期列表拷贝
            monthList: this.getMonth(12),
            ruleDate: {
                start: '',
                end: ''
            }
        };
    },
    watch: {
        dialogVisibleCreate (val) {
            if(!val) {
                // this.formData.allDay = this.formData.dialog = false;
                // this.formData.type = '';
                // this.formData.flag = true;
            }
        }
    },
    filters: {
        filterType (type) {
            if(type == '') return '选择重复';
            if(type == 0) return '不重复';
            if(type == 1) return '每天重复';
            if(type == 2) return '每周重复';
            if(type == 3) return '每月重复';
            if(type == 4) return '工作日重复';
        }
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '客服系统'},{title: '客服管理'},{title: '客服设置'},{title: '排期设置'}]);

        if(JSON.parse(this.$route.query.no).kf_no) {
            this.kf_no = JSON.parse(this.$route.query.no).kf_no;
        }
        if(JSON.parse(this.$route.query.no).shop_no) {
            this.shop_no = JSON.parse(this.$route.query.no).shop_no;
        }
        document.querySelector('.dialogVisibleCreate').addEventListener('click', e => {
            e.stopPropagation();
        });
        this.init();
        this.getRuleDate(0);
    },
    methods: {
        /**
         * @description 初始化日程数据
         */
        init () {
            const start_time = this.getDate(0) / 1000;
            const end_time = this.getYear() / 1000;

            this.$post('/student/customer_service_student%5Cget_schedule',{
                shop_no: this.shop_no,
                kf_no: this.kf_no,
                start_time: start_time,
                end_time: end_time
            },resp=>{
                if (resp.code == 1) {
                    let list = resp.data.list;

                    for(let i=0; i<list.length; i++) {
                        this.calendarEvents.push({
                            ...config,
                            id: this.randomString(32),
                            start: this.gethous(list[i].start_time),
                            end: this.gethous(list[i].end_time)
                        });
                    }

                    console.log('calendarEvents', this.calendarEvents);
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 随机生成Id,服务端只返回时间段～,用于修改时使用
         */
        randomString (len) {
            let id = len || 32;
            let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
            let maxPos = $chars.length;
            let pwd = '';

            for (let i = 0; i < id; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        },

        /**
         * @description 时间戳转日期格式
         */
        gethous (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth()+1,
                day = new Date(temp * 1000).getDate(),
                h = new Date(temp * 1000).getHours(),
                m = new Date(temp * 1000).getMinutes(),
                s = new Date(temp * 1000).getSeconds();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s;
        },

        /**
         * @description 鼠标滑动选择日程
         */
        select (event) {
            const selectDate = {
                start_time: this.filterSelectDate(event.startStr),
                end_time: this.filterSelectDate(event.endStr)
            };

            if(new Date(selectDate.start_time).getTime() < this.getDate(0) || new Date(selectDate.start_time).getTime() > this.getYear()) {
                this.$notify({
                    title: '提示',
                    message: '只可以创建指定时间段的排期',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            const flag = selectDate => {
                return selectDate.start_time.split(' ')[0] === selectDate.end_time.split(' ')[0];
            };
            const time = (type, selectDate) => {
                try {
                    if(type == 'start') {
                        return selectDate.start_time.split(' ')[1];
                    } else if (type == 'end') {
                        return selectDate.end_time.split(' ')[1];
                    }
                } catch (error) {
                    console.log('time', error);
                }
            };

            this.eventType = 'add';
            this.formData = {
                ...LIST,
                id: this.randomString(32)
            };
            this.formData.flag = flag(selectDate);
            this.formData.select_date = this.filterDate(this.formData.flag, selectDate);
            this.formData.startTime = time('start', selectDate).split(':')[0] + ':' + time('start', selectDate).split(':')[1];
            this.formData.endTime = time('end', selectDate).split(':')[0] + ':' + time('end', selectDate).split(':')[1];
            this.dialogVisibleCreate = !this.dialogVisibleCreate;

            console.log('selectDate', this.formData.flag, selectDate);
        },

        /**
         * @description 确定创建排期
         */
        createDate () {
            let endTime = this.getYear() / 1000 - this.getDate(0) / 1000;
            let timeDay = parseInt(endTime / 60 / 60 / 25);//时间段内天数

            if(this.eventType == 'add') {
                const start_time = this.filterCreateDate('start', this.formData);
                const end_time = this.filterCreateDate('end', this.formData);
                const data = {
                    start_time: new Date(start_time).getTime() / 1000,
                    end_time: new Date(end_time).getTime() / 1000
                };

                // 规则：向当前日期后重复一个月 1:每天重复 2:每周重复 3:每月重复 4:工作日重复
                const handleDate = (type, start_time, end_time, config) => {
                    if(type == 1 || type == 7 || type == 30) {
                        let createDate = [];
                        let start = new Date(start_time).getTime();
                        let end = new Date(end_time).getTime();

                        for(let key=0; key<=timeDay; key+=type) {
                            createDate.push({
                                ...config,
                                id: this.randomString(32),
                                start: this.$moment(start + 86400000 * key).format('YYYY-MM-DD HH:mm:ss'),
                                end: this.$moment(end + 86400000 * key).format('YYYY-MM-DD HH:mm:ss'),
                            });
                        }
                        this.calendarEvents = this.calendarEvents.concat(createDate);
                    }

                    //处理工作日重复
                    if(type == 4) {
                        let createDate = [];
                        let start = new Date(start_time).getTime();
                        let end = new Date(end_time).getTime();
                        let no = new Date(Date.parse(start_time)).getDay();
                        let first = this.getDate((no - new Date().getDay()));
                        let last = this.getYear();

                        for(let key = first; key < last; key += 86400000) {
                            let d = new Date(key).getDay();

                            if(d >= no && d <= 5) {
                                const num = (key - first) / 86400000;

                                createDate.push({
                                    ...config,
                                    id: this.randomString(32),
                                    start: this.$moment(start + 86400000 * num).format('YYYY-MM-DD HH:mm:ss'),
                                    end: this.$moment(end + 86400000 * num).format('YYYY-MM-DD HH:mm:ss'),
                                });
                            }
                        }

                        this.calendarEvents = this.calendarEvents.concat(createDate);
                    }
                };

                //true: 工作日 false: 非工作日
                const getWeek = num => {
                    if(num === 6 || num === 0) {
                        return true;
                    } else {
                        return false;
                    }
                };

                if(this.formData.type == 1) {
                    handleDate(1, start_time, end_time, config);
                } else if(this.formData.type == 2) {
                    handleDate(7, start_time, end_time, config);
                } else if (this.formData.type == 3) {
                    handleDate(30, start_time, end_time, config);
                } else if (this.formData.type == 4) {
                    const startWeek = getWeek(new Date(Date.parse(start_time)).getDay());
                    const endWeek = getWeek(new Date(Date.parse(end_time)).getDay());

                    if(!this.formData.flag) {
                        this.$notify({
                            title: '提示',
                            message: '工作日重复只可以选择一天中的时间段,请使用时间选择器进行选择',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }

                    if(startWeek || endWeek) {
                        this.$notify({
                            title: '提示',
                            message: '排期时间中不可包含工作日',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                    handleDate(4, start_time, end_time, config);
                    console.log('startWeek', startWeek);
                } else {
                    this.calendarEvents.push({
                        ...config,
                        id: this.randomString(32),
                        start: start_time,
                        end: end_time
                    });
                }

                this.setSchedule();
                this.dialogVisibleCreate = !this.dialogVisibleCreate;
            }

            if(this.eventType == 'edit') {
                for(let key=0; key<this.calendarEvents.length; key++) {
                    if(this.calendarEvents[key].id == this.dateID) {
                        this.calendarEvents[key].start = this.filterCreateDate('start', this.formData);
                        this.calendarEvents[key].end = this.filterCreateDate('end', this.formData);
                    }
                }
                this.setSchedule();
                this.dialogVisibleCreate = !this.dialogVisibleCreate;
            }
        },

        /**
         * @description 创建日程排期
         * @type        过滤函数
         *      返回： 2020-06-03 08:00:00
         */
        filterCreateDate (param, formData) {
            if(param == 'start') {
                try {
                    if(formData.flag) {
                        const date = formData.select_date.replace(/年/,'-').replace(/月/,'-').replace(/日/,' ') + '' + formData.startTime;

                        return date;
                    } else {
                        const date = formData.select_date.split('-')[0].replace(/年/,'-').replace(/月/,'-').replace(/日/,' ') + '' + formData.startTime;

                        return date;
                    }
                } catch (error) {
                    console.log('filterCreateDate', error);
                }
            } else if (param == 'end') {
                try {
                    if(formData.flag) {
                        const date = formData.select_date.replace(/年/,'-').replace(/月/,'-').replace(/日/,' ') + '' + formData.endTime;

                        return date;
                    } else {
                        const date = formData.select_date.split('-')[1].replace(/年/,'-').replace(/月/,'-').replace(/日/,' ') + '' + formData.endTime;

                        return date;
                    }
                } catch (error) {
                    console.log('filterCreateDate', error);
                }
            }
        },

        /**
         * @description true: 设置当天
         */
        setFormData (type) {
            if(type) {
                this.$set(this.formData, 'startTime', '00:00');
                this.$set(this.formData, 'endTime', '24:00');
            }
        },

        /**
         * @description 选择后日期展示处理
         *      flag: 只有当天日程/含有其它天日程
         */
        filterDate (flag, selectDate) {
            try {
                if(flag) {
                    let str = selectDate.start_time.split(' ')[0];

                    return str.replace(/-/,'年').replace(/-/,'月') + '日';
                } else {
                    let start = selectDate.start_time.split(' ')[0],
                        end = selectDate.end_time.split(' ')[0];

                    return start.replace(/-/,'年').replace(/-/,'月') + '日' + '-' + end.replace(/-/,'年').replace(/-/,'月') + '日';
                }
            } catch (error) {
                console.log('filterDate', error);
            }
        },

        /**
         * @description 取消选择日程
         */
        unselect (event) {
            console.log('unselect', this.formData, event);
        },

        /**
         * @description 点击编辑已创建的日程
         */
        eventClick (event) {
            const start = this.$moment(Date.parse(event.event.start) - 28800000).format('YYYY-MM-DD HH:mm:ss');
            const end = this.$moment(Date.parse(event.event.end) - 28800000).format('YYYY-MM-DD HH:mm:ss');
            const data = {
                id: event.event.id,
                start_time: start,
                end_time: end
            };

            const flag = data => {
                return data.start_time.split(' ')[0] === data.end_time.split(' ')[0];
            };
            const time = (type, selectDate) => {
                try {
                    if(type == 'start') {
                        return selectDate.start_time.split(' ')[1];
                    } else if (type == 'end') {
                        return selectDate.end_time.split(' ')[1];
                    }
                } catch (error) {
                    console.log('time', error);
                }
            };

            this.eventType = 'edit';
            this.dateID = data.id;
            this.formData.dialog = false;
            this.formData.flag = flag(data);
            this.formData.select_date = this.filterDate(this.formData.flag, data);
            this.formData.startTime = time('start', data).split(':')[0] + ':' + time('start', data).split(':')[1];
            this.formData.endTime = time('end', data).split(':')[0] + ':' + time('end', data).split(':')[1];
            this.dialogVisibleCreate = !this.dialogVisibleCreate;

            console.log('eventClick', data, this.formData);
        },

        /**
         * @description 监听日程被拉伸
         */
        eventResize (event) {
            //拖动计算时间发现误差8小时
            const start = this.$moment(Date.parse(event.event.start) - 28800000).format('YYYY-MM-DD HH:mm:ss');
            const end = this.$moment(Date.parse(event.event.end) - 28800000).format('YYYY-MM-DD HH:mm:ss');
            const data = {
                id: event.event.id,
                strat_time: start,
                end_time: end
            };

            if(new Date(start).getTime() < this.getDate(0) || new Date(start).getTime() > this.getYear()) {
                event.revert();
                this.$notify({
                    title: '提示',
                    message: '只可以设置指定时间段的排期',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            } else {
                for(let key=0; key<this.calendarEvents.length; key++) {
                    if(this.calendarEvents[key].id == data.id) {
                        this.calendarEvents[key].start = start;
                        this.calendarEvents[key].end = end;
                    }
                }
                this.setSchedule();
            }

            console.log('eventResize', start, end, this.calendarEvents);
        },

        /**
         * @description 监听日程被拖动
         */
        dropEvent(event) {
            //拖动计算时间发现误差8小时
            const start = this.$moment(Date.parse(event.event.start) - 28800000).format('YYYY-MM-DD HH:mm:ss');
            const end = this.$moment(Date.parse(event.event.end) - 28800000).format('YYYY-MM-DD HH:mm:ss');
            const data = {
                id: event.event.id,
                strat_time: start,
                end_time: end
            };

            if(new Date(start).getTime() < this.getDate(0) || new Date(start).getTime() > this.getYear()) {
                event.revert();
                this.$notify({
                    title: '提示',
                    message: '只可以设置指定时间段的排期',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            } else {
                for(let key=0; key<this.calendarEvents.length; key++) {
                    if(this.calendarEvents[key].id == data.id) {
                        this.calendarEvents[key].start = start;
                        this.calendarEvents[key].end = end;
                    }
                }
                this.setSchedule();
            }

            console.log('dropEvent', event, start, end, this.calendarEvents);
        },

        /**
         * @description 修改后重新设置排期
         */
        setSchedule () {
            const start_time = this.getDate(0) / 1000;
            const end_time = this.getYear() / 1000;
            let dataList = [];

            // console.log('calendarEvents', this.calendarEvents);

            if(this.calendarEvents.length) {
                for(let i=0; i<this.calendarEvents.length; i++) {
                    dataList.push({
                        start_time: new Date(this.calendarEvents[i].start).getTime() / 1000,
                        end_time: new Date(this.calendarEvents[i].end).getTime() / 1000
                    });
                }
            }

            this.$post('/student/customer_service_student%5Cset_schedule', {
                shop_no: this.shop_no,
                kf_no: this.kf_no,
                start_time: start_time,
                end_time: end_time,
                schedule: JSON.stringify(dataList)
            }, resp => {
                if(resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 撤销排期
         */
        cancelDate () {
            const start_time = this.getDate(0) / 1000;
            const end_time = this.getYear() / 1000;

            this.$post('/student/customer_service_student%5Cget_schedule', {
                shop_no: this.shop_no,
                kf_no: this.kf_no,
                start_time: start_time,
                end_time: end_time
            }, resp => {
                if(resp.code == 1) {
                    let list = resp.data.list;
                    let array = {};

                    for(let j=0; j<list.length; j++) {
                        const month = new Date(list[j].start_time * 1000).getMonth() + 1;

                        if(!array[month]) {
                            array[month] = [list[j]];
                        } else {
                            array[month] = array[month].concat([list[j]]);
                        }
                    }

                    console.log('array', array);

                    this.scheduleListCopy = JSON.parse(JSON.stringify(array));
                    this.scheduleList = array[new Date().getMonth() + 1];

                    this.dialogVisibleCancel = !this.dialogVisibleCancel;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 获取未来一年月份
         */
        getMonth (num) {
            //获取未来一年每月0点时间戳，对排期数据进行时间唯独划分
            let month = new Date().getMonth() + 1;
            let monthList = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
            let date = [];

            for(let key=0; key<num; key++) {
                if(month > 12) {
                    month = 1;
                    date.push({
                        value: month,
                        label: monthList[month - 1]
                    });
                    month ++;
                } else {
                    date.push({
                        value: month,
                        label: monthList[month - 1]
                    });
                    month ++;
                }
            }
            return date;
        },

        /**
         * @description 撤销所有排期
         */
        cancelAllDate () {
            let list = JSON.parse(JSON.stringify(this.scheduleListCopy[this.formData.month]));

            list.forEach(element => {
                element.flag = true;
            });

            this.scheduleList = list;
        },

        /**
         * @description 切换月份数据排期
         */
        getMonthList () {
            this.scheduleList = JSON.parse(JSON.stringify(this.scheduleListCopy[this.formData.month]));
        },

        /**
         * @description 撤销/取消撤销
         */
        chengeScedule (row) {
            this.$set(row, 'flag', !row.flag);
        },

        /**
         * @description 确定撤销排期
         */
        confirmDate () {
            let array = [];
            let start_time = this.getDate(0) / 1000;
            let end_time = this.getYear() / 1000;

            for(let key in this.scheduleListCopy) {
                if(Number(key) !== Number(this.formData.month)) {
                    for(let i=0; i< this.scheduleListCopy[key].length; i++) {
                        array.push(this.scheduleListCopy[key][i]);
                    }
                }
            }

            for(let j=0; j<this.scheduleList.length; j++) {
                if(!this.scheduleList[j].flag) {
                    array.push(this.scheduleList[j]);
                }
            }

            let dataList = array.reduce((cur,next)=> {
                cur.push({
                    start_time: next.start_time,
                    end_time: next.end_time
                });
                return cur;
            },[]);

            this.$post('/student/customer_service_student%5Cset_schedule', {
                shop_no: this.shop_no,
                kf_no: this.kf_no,
                start_time: start_time,
                end_time: end_time,
                schedule: JSON.stringify(dataList)
            }, resp => {
                if(resp.code == 1) {
                    this.dialogVisibleCancel = !this.dialogVisibleCancel;
                    this.updateData();
                    this.$notify({
                        title: '提示',
                        message: '撤销成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 更新数据
         */
        updateData () {
            this.calendarEvents = [];
            this.init();
        },

        /**
         * @description 对选择的时间格式过滤
         * @type        过滤函数
         *      2020-10-02T13:30:00Z
         */
        filterSelectDate (str) {
            if(str) {
                return str.replace(/T/img,' ').replace(/Z/img,'');
            } else {
                this.$notify({
                    title: '提示',
                    message: '获取时间有误',
                    type: 'warning',
                    duration: 1000
                });
            }
        },

        /**
         * @description 设置重复状态
         */
        changeType (type) {
            this.$set(this.formData, 'type', type);
            this.$set(this.formData, 'dialog', false);
        },

        /**
         * @description 获取规则展示日期
         */
        getRuleDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let year = new Date().getFullYear() + 1;
            let month = new Date().getMonth() + 1;
            let date = new Date().getDate();

            month = month < 10 ? 0 + month : month;
            date = date < 10 ? 0 + date : date;

            this.$set(this.ruleDate, 'start', result_Year + "-" + result_Month + "-" + result_Date);
            this.$set(this.ruleDate, 'end', year + '-' + month + '-' + date);
        },

        /**
         * @description 获取指定日期时间戳
         */
        getDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * @description 获取一年后当天的时间戳
         */
        getYear () {
            let year = new Date().getFullYear() + 1;
            let month = new Date().getMonth() + 1;
            let date = new Date().getDate();

            month = month < 10 ? 0 + month : month;
            date = date < 10 ? 0 + date : date;

            return new Date(year+'-'+month +'-'+date + ' ' + '00:00:00').getTime() - 1000;
        }
    }
};
</script>

<style lang="less" scoped>
.schedule {
    width: 100%;
    box-sizing: border-box;
    // border: 1px #EEEEEE solid;
    display: flex;
    flex-direction: column;
    padding: 0 32px;
    .schedule-rule {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        background: rgba(238, 78, 89, 0.1);
        color: rgba(0, 0, 0, 0.9);
        font-size: 14px;
        padding-left: 24px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .wrap {
        width: 100%;
        flex: 1;
        background: #ffffff;
        position: relative;
        .cancel {
            color: #20A0FF;
            cursor: pointer;
            font-size: 14px;
            position: absolute;
            top: 13px;
            right: 14px;
        }
        .line {
            width: 4px;
            height: 40px;
            background: #fff;
            position: absolute;
            top: 41px;
            right: 2px;
            z-index: 99;
        }
    }
    .nav {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333333;
        font-size: 14px;
        cursor: pointer;
        position: relative;
        .left {
            color: #333333;
            font-size: 15px;
            margin-right: 7px;
            position: relative;
            top: -2px;
            &:hover {
                color: #20A0FF;
            }
        }
        .right {
            color: #333333;
            font-size: 15px;
            margin-left: 5px;
            transform: rotate(180deg);
            position: relative;
            top: -2px;
            &:hover {
                color: #20A0FF;
            }
        }
        .cancel {
           color: #20A0FF;
           cursor: pointer;
           font-size: 14px;
           position: absolute;
           right: 14px;
        }
    }
    .dialogVisibleCreate {
        .wrap {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 24px;
            .el-icon-hand-nianfen {
                font-size: 14px;
                margin-right: 12px;
            }
            .wrap-dete {
                font-size: 14px;
                color: #666666;
                position: relative;
                top: 1px;
            }
        }
        .temp {
            display: flex;
            align-items: center;
            margin-top: 14px;
            padding-left: 26px;
            box-sizing: border-box;
            color: #666666;
            font-size: 14px;
            white-space: nowrap;
        }
        .radio {
            display: flex;
            align-items: center;
            margin-top: 24px;
            color: #20A0FF;
            font-size: 14px;
            cursor: pointer;
            i {
                color: #20A0FF;
                font-size: 14px;
                margin-right: 12px;
            }
        }
        .dilog {
            width: 330px;
            height: 84px;
            background: #FFFFFF;
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
            border-radius: 4px;
            position: absolute;
            left: 170px;
            top: 165px;
            box-sizing: border-box;
            padding: 20px 10px;
        }
        .dialog-footer {
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }
    .date-footer {
        display: flex;
        justify-content: center;
        margin-top: 32px;
        margin-bottom: 35px;
    }
    .dialodWrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }
}
</style>

<style lang="less">
.schedule {
    .fc-toolbar {
        background: #fbfbfb;
        margin-bottom: 0;
        height: 40px;
        .fc-center>div {
            display: flex;
            align-items: center;
            button {
                outline: none;
                &:focus {
                    outline: 0;
                    border: none;
                    background: none;
                    box-shadow: none;
                }
            }
            &>h2 {
                color: #333333;
                font-size: 14px;
                position: relative;
                top: 3px;
            }
            .fc-button-primary {
                background: transparent;
                color: #333333;
                border: none;
                outline: none;
                &:hover {
                    border: none;
                    background: transparent;
                }
            }
        }
    }
    .fc-view-container {
       .fc-view {
            &>table {
                background: #fbfbfb;
                .fc-head .fc-row {
                    // margin-right: 0 !important;
                    &>table>thead>tr {
                        height: 40px;
                        line-height: 40px;
                        &>th {
                            // width: auto !important;
                        }
                    }
                }
                .fc-body {
                    .fc-day-grid, .fc-divider {
                        display: none;
                    }
                    // .fc-widget-content {
                    //     .fc-day-grid {
                    //         .fc-row {
                    //             margin-right: 0 !important;
                    //         }
                    //         .fc-bg>table>tbody>tr .fc-widget-content {
                    //             width: auto !important;
                    //         }
                    //     }
                    //     .fc-divider {
                    //         display: none;
                    //     }
                    //     .fc-scroller {
                    //         .fc-slats table tbody tr> .fc-time {
                    //             // width: auto !important;
                    //             width: calc(100% / 8);
                    //         }
                    //     }
                    // }
                    .fc-highlight {
                       background: #FFAF39;
                    }
                }
            }
        }
        .fc-sun {
            border-right: none;
        }
    }
    .fc-scroller {
        &::-webkit-scrollbar {
            width: 3px;
        }
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 30px 20px;
    }
    //创建弹窗
    .dialogVisibleCreate {
        .el-checkbox__label {
            position: relative;
            top: 1px;
        }
        .dilog .el-radio {
            width: calc(100% / 3);
            margin-right: 0;
            margin-bottom: 12px;
        }
    }
    .fc-time-grid .fc-slats .fc-minor td {
        border: none;
    }
}
</style>